<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="../src/infobox.js"></script>
<script type="text/javascript">

	function initialize() {

		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			zoom: 15,
			center: secheltLoc,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


		var labelText = "City Hall";

		var myOptions = {
			 content: labelText
			,boxStyle: {
			   border: "1px solid black"
			  ,textAlign: "center"
			  ,fontSize: "8pt"
			  ,width: "50px"
			 }
			,disableAutoPan: true
			,pixelOffset: new google.maps.Size(-25, 0)
			,position: secheltLoc
			,closeBoxURL: ""
			,isHidden: false
			,pane: "mapPane"
			,enableEventPropagation: true
		};

		var ibLabel = new InfoBox(myOptions);
		ibLabel.open(map);
	}
</script>

<title>Creating a Map Label with InfoBox</title>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height: 400px"></div>
	<p>
	This example shows how to use an InfoBox as a map label. Like all true map labels, the InfoBox is attached to the "mapPane" so that it appears below markers and information windows. In this case, the InfoBox label is the word <i>City Hall</i> inside a rectangle. The 50px wide label is centered below the label's position by specifying a pixelOffset of (-25, 0).
</body>

</html>
